<template>
  <div class="right_personnel">
    <cn-title title="人才培训"></cn-title>
    <div class="personnel_main">
      <div class="l_personnel">
        <div class="l_l">
          <div class="l_l_t">
            <div class="title d_a_c">
              <img src="@/assets/img/l_title.png" alt="" />
              培训次数
              <span></span>
              <select
                class="select_option"
                v-model="selectActive1"
                @change="onChange1()"
              >
                <option
                  v-for="(item, index) in selectList1"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.name }}
                </option>
              </select>
            </div>
            <div class="px_chart">
              <div class="chart_1">
                <em class="number">13</em>
                <div class="unit">次</div>
                <div class="title">培训次数</div>
              </div>
              <div class="chart_2">
                <img src="@/assets/img/peixunrenci.png" alt="" />
                <em class="number">13</em>
                <div class="unit">次</div>
                <div class="title">培训人次</div>
              </div>
            </div>
          </div>
          <div class="l_l_d">
            <div class="title d_a_c">
              <img src="@/assets/img/l_title.png" alt="" />
              商业带头人
              <span style="width: 145px"></span>
            </div>
            <vue-seamless-scroll
              :data="whdrList"
              class="business_warp"
              :class-option="businessLeaderOption"
            >
              <div
                v-for="(item, index) in businessLeaders"
                :key="index + getRanddow()"
                class="user_box"
              >
                <img :src="item.img" alt="" />
                <div class="desc row_3_ellipsis">
                  <span>简介：</span>
                  <span class="content">{{ item.desc }}</span>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="l_r">
          <div class="l_r_t">
            <div class="title d_a_c">
              <img src="@/assets/img/l_title.png" alt="" />
              网红达人培训
              <span style="width: 100px"></span>
              <select
                class="select_option"
                v-model="selectActive2"
                @change="onChange2()"
              >
                <option
                  v-for="(item, index) in selectList2"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.name }}
                </option>
              </select>
            </div>
            <div class="m_tabel_h d_a_c">
              <div class="t_b_1">序号</div>
              <div class="t_b_2">姓名</div>
              <div class="t_b_3">培训机构</div>
              <div class="t_b_4">培训课时</div>
              <div class="t_b_5">培训次数</div>
            </div>
            <vue-seamless-scroll
              :data="whdrList"
              class="tabel_warp"
              :class-option="defaultOption"
            >
              <div
                class="m_tabel_b d_a_c"
                v-for="(item, index) in whdrList"
                :key="index + getRanddow()"
              >
                <div class="t_b_1">
                  <div class="xh_td">
                    <img src="@/assets/img/xh_1.png" alt="" />
                    <span>{{ index + 1 }}</span>
                  </div>
                </div>
                <div class="t_b_2">{{ item.name }}</div>
                <div class="t_b_3">{{ item.unit }}</div>
                <div class="blue t_b_4">{{ item.pxks_count }}</div>
                <div class="t_b_5">{{ item.px_count }}</div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div class="l_r_d">
            <div class="title d_a_c">
              <img src="@/assets/img/l_title.png" alt="" />
              电商运营人员培训
              <span style="width: 60px"></span>
              <select
                class="select_option"
                v-model="selectActive3"
                @change="onChange3()"
              >
                <option
                  v-for="(item, index) in selectList3"
                  :key="index"
                  :value="item.value"
                >
                  {{ item.name }}
                </option>
              </select>
            </div>
            <div class="m_tabel_h d_a_c">
              <div class="t_b_1">序号</div>
              <div class="t_b_2">姓名</div>
              <div class="t_b_3">培训机构</div>
              <div class="t_b_4">培训课时</div>
              <div class="t_b_5">培训次数</div>
            </div>
            <vue-seamless-scroll
              :data="dsyyList"
              class="tabel_warp"
              :class-option="defaultOption"
            >
              <div
                class="m_tabel_b d_a_c"
                v-for="(item, index) in dsyyList"
                :key="index + getRanddow()"
              >
                <div class="t_b_1">
                  <div class="xh_td">
                    <img src="@/assets/img/xh_2.png" alt="" />
                    <span>{{ index + 1 }}</span>
                  </div>
                </div>
                <div class="t_b_2">{{ item.name }}</div>
                <div class="t_b_3">{{ item.unit }}</div>
                <div class="blue t_b_4">{{ item.pxks_count }}</div>
                <div class="t_b_5">{{ item.px_count }}</div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="r_personnel">
        <div class="r_t">
          <div class="title d_a_c">
            <img src="@/assets/img/l_title.png" alt="" />
            电商选品人员培训
            <span style="width: 60px"></span>
            <select
              class="select_option"
              v-model="selectActive4"
              @change="onChange4()"
            >
              <option
                v-for="(item, index) in selectList4"
                :key="index"
                :value="item.value"
              >
                {{ item.name }}
              </option>
            </select>
          </div>
          <div class="m_tabel_h d_a_c">
            <div class="t_b_1">序号</div>
            <div class="t_b_2">姓名</div>
            <div class="t_b_3">培训机构</div>
            <div class="t_b_4">培训课时</div>
            <div class="t_b_5">培训次数</div>
          </div>
          <vue-seamless-scroll
            :data="dsxpList"
            class="tabel_warp"
            :class-option="defaultOption"
          >
            <div
              class="m_tabel_b d_a_c"
              v-for="(item, index) in dsxpList"
              :key="index + getRanddow()"
            >
              <div class="t_b_1">
                <div class="xh_td">
                  <img src="@/assets/img/xh_3.png" alt="" />
                  <span>{{ index + 1 }}</span>
                </div>
              </div>
              <div class="t_b_2">{{ item.name }}</div>
              <div class="t_b_3">{{ item.unit }}</div>
              <div class="blue t_b_4">{{ item.pxks_count }}</div>
              <div class="t_b_5">{{ item.px_count }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <div class="r_d">
          <div class="title d_a_c">
            <img src="@/assets/img/l_title.png" alt="" />
            智慧养殖、种植人员培训
            <span style="width: 10px"></span>
            <select
              class="select_option"
              v-model="selectActive5"
              @change="onChange5()"
            >
              <option
                v-for="(item, index) in selectList5"
                :key="index"
                :value="item.value"
              >
                {{ item.name }}
              </option>
            </select>
          </div>
          <div @click.stop="handleSelectClick($event)" class="img_box">
            <div class="img_1 d_c">
              <div class="count">123</div>
              <div>培训人数</div>
            </div>
            <vue-seamless-scroll
              :data="videoList"
              class="video_warp"
              :class-option="videoOption"
            >
              <div style="display: flex">
                <div
                  v-for="(item, index) in videoList"
                  :key="index + getRanddow()"
                  class="img_2 d_c"
                  accesskey="row"
                  :data-obj="JSON.stringify(item)"
                  style="margin-right: 30px; float: left"
                >
                  <img
                    class="img_bg"
                    src="@/assets/img/zhaopiankuang.png"
                    alt=""
                  />
                  <img class="hd_img p_c" :src="item.img" alt="" />
                  <img
                    style="z-index: 1"
                    src="@/assets/img/icon_play.png"
                    alt=""
                    class="p_c pointer"
                  />
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
    </div>
    <cn-video :show="openVideo" :src="videoSrc" @close="closeVideo" />
  </div>
</template>

<script>
import CnTitle from "../common/CnTitle.vue";
import CnVideo from "../common/CnVideo.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    CnTitle,
    CnVideo,
    vueSeamlessScroll,
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
    businessLeaderOption() {
      return {
        step: 0.2,
        limitMoveNum: 2,
        hoverStop: true,
        direction: 1,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1000,
      };
    },
    videoOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  data() {
    return {
      selectActive1: "1",
      selectList1: [
        { name: "第一季度", value: "1" },
        { name: "第二季度", value: "2" },
        { name: "第三季度", value: "3" },
        { name: "第四季度", value: "4" },
      ],
      selectActive2: "1",
      selectList2: [
        { name: "第一季度", value: "1" },
        { name: "第二季度", value: "2" },
        { name: "第三季度", value: "3" },
        { name: "第四季度", value: "4" },
      ],
      selectActive3: "1",
      selectList3: [
        { name: "第一季度", value: "1" },
        { name: "第二季度", value: "2" },
        { name: "第三季度", value: "3" },
        { name: "第四季度", value: "4" },
      ],
      selectActive4: "1",
      selectList4: [
        { name: "第一季度", value: "1" },
        { name: "第二季度", value: "2" },
        { name: "第三季度", value: "3" },
        { name: "第四季度", value: "4" },
      ],
      selectActive5: "1",
      selectList5: [
        { name: "第一季度", value: "1" },
        { name: "第二季度", value: "2" },
        { name: "第三季度", value: "3" },
        { name: "第四季度", value: "4" },
      ],
      whdrList: [
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
      ],
      dsyyList: [
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
      ],
      dsxpList: [
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
        {
          name: "李娜",
          unit: "仁通培训",
          pxks_count: 108,
          px_count: 14,
        },
      ],
      videoSrc: "",
      openVideo: false,
      businessLeaders: [
        {
          img: "/img/rc_avatar.png",
          desc: "袁雁,农民企业家，创立了怀仁县袁府生态生物科技有限责任公司，多次被评为省、市两级优秀民营企业。",
        },
        {
          img: "/img/rc_avatar.png",
          desc: "袁雁,农民企业家，创立了怀仁县袁府生态生物科技有限责任公司，多次被评为省、市两级优秀民营企业。",
        },
        {
          img: "/img/rc_avatar.png",
          desc: "袁雁,农民企业家，创立了怀仁县袁府生态生物科技有限责任公司，多次被评为省、市两级优秀民营企业。",
        },
      ],
      videoList: [
        {
          img: "/img/rypx.png",
          url: "/test.mp4",
        },
        {
          img: "/img/rypx.png",
          url: "/test.mp4",
        },
        {
          img: "/img/rypx.png",
          url: "/test.mp4",
        },
      ],
    };
  },
  methods: {
    handleSelectClick(e) {
      let el = null;
      for (let i = 0; i < e.path.length; i++) {
        if (e.path[i].accessKey == "row") {
          el = e.path[i];
          break;
        }
      }
      if (el == null) return;
      let item = JSON.parse(el.dataset.obj);
      this.toPlay(item.url);
    },
    getRanddow() {
      let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      arr.sort(function () {
        return 0.5 - Math.random();
      });
      return +new Date() + arr;
    },
    onChange1() {
      console.log(this.selectActive1);
    },
    onChange2() {
      console.log(this.selectActive2);
    },
    onChange3() {
      console.log(this.selectActive3);
    },
    onChange4() {
      console.log(this.selectActive4);
    },
    onChange5() {
      console.log(this.selectActive5);
    },
    toPlay(src) {
      this.openVideo = true;
      this.videoSrc = src;
    },
    closeVideo() {
      this.videoSrc = "";
      this.openVideo = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.right_personnel {
  width: 100%;
  height: 322px;

  .personnel_main {
    height: calc(100% - 45px);
    width: 100%;
    display: flex;
    .m_tabel_h,
    .m_tabel_b {
      color: #aed0ef;
      font-size: 12px;
      width: 93%;
      height: 22px;
    }
    .m_tabel_b {
      .xh_td {
        position: relative;
        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
    .m_tabel_b:nth-child(odd) {
      background: #012561;
    }
    .t_b_1 {
      width: 42px;
      text-align: center;
    }
    .t_b_2 {
      width: 46px;
      text-align: center;
    }
    .t_b_3 {
      width: 88px;
      text-align: center;
    }
    .t_b_4 {
      width: 88px;
      text-align: center;
    }
    .t_b_5 {
      width: 88px;
      text-align: center;
    }

    .tabel_warp {
      height: 66px;
      overflow: hidden;
    }

    .business_warp {
      height: 113px;
      overflow: hidden;
    }

    .video_warp {
      height: 85px;
      width: 200px;
      overflow: hidden;
    }

    .table {
      color: #aed0ef;
      font-size: 12px;
      width: 93%;
      border-collapse: collapse;
      .xh_td {
        position: relative;
        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      tr {
        width: 352px;
        height: 22px;
      }
      tr:nth-child(even) {
        background: #012561;
      }
    }
    .title {
      color: #fff;
      font-size: 18px;
      text-align: left;
      height: 24px;
      margin: 6px 0;
      img {
        width: 15px;
        height: auto;
        margin-right: 10px;
      }
      span {
        display: inline-block;
        width: 80px;
        border-top: 1px dashed #aed0ef;
        margin: 0 20px;
        margin: 0 5px 0 20px;
        transform: translateY(-50%);
      }
    }
    .select_option {
      color: #009bff;
      border: 1px solid #009bff;
      border-radius: 3px;
      height: 20px;
      width: 80px;
      font-size: 12px;
      outline: none;
      z-index: 10;
      background: linear-gradient(
        0deg,
        rgba(0, 155, 255, 0.57) 0%,
        rgba(0, 155, 255, 0) 100%
      );
      margin-left: 10px;
    }
    .l_personnel {
      width: 706px;
      height: 100%;
      display: flex;
      .l_l {
        width: 322px;
        height: 100%;
        .l_l_t {
          height: 118px;
          width: 100%;
          .px_chart {
            height: calc(100% - 34px);
            width: 100%;
            display: flex;
            justify-content: space-around;
            margin-top: -6px;
            .chart_1,
            .chart_2 {
              width: 70px;
              height: 80px;
              position: relative;
              background-size: 100%;
              background-repeat: no-repeat;
              color: #fff;
              .number {
                font-size: 20px;
                position: absolute;
                left: 48%;
                top: 15px;
                transform: translateX(-50%);
              }
              .unit {
                font-size: 12px;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 40px;
              }
              .title {
                font-size: 14px;
                color: #aed0ef;
                position: absolute;
                bottom: -30px;
                left: 0;
                width: 100%;
                text-align: center;
              }
            }
            .chart_1 {
              background-image: url("@/assets/img/peixuncishu.png");
            }
            .chart_2 {
              width: 110px;
              .title {
                bottom: -20px;
              }
              img {
                width: 110px;
              }
            }
          }
        }
        .l_l_d {
          height: calc(100% - 118px);
          width: 100%;
          .title {
            margin: 5px 0;
          }
          .user_box {
            height: 53px;
            width: 100%;
            display: flex;
            font-size: 12px;
            margin-bottom: 5px;
            .desc {
              color: #009bff;
              width: 70%;
              text-align: left;
              height: 53px;
              margin-left: 10px;
              .content {
                color: #aed0ef;
              }
            }
          }
        }
      }
      .l_r {
        width: calc(100% - 322px);
        height: 100%;
        .l_r_t {
          height: 130px;
          width: 100%;
        }
        .l_r_d {
          height: calc(100% - 130px - 20px);
          width: 100%;
        }
      }
    }
    .r_personnel {
      width: calc(100% - 706px);
      height: 100%;
      .r_t {
        height: 130px;
        width: 100%;
      }
      .r_d {
        height: calc(100% - 130px - 20px);
        width: 100%;
        .img_box {
          height: calc(100% - 34px);
          width: 100%;
          display: flex;
          justify-content: space-around;

          color: #fff;

          .img_1 {
            width: 85px;
            height: 85px;
            background-image: url("@/assets/img/peixunrenci1.png");
            background-size: cover;
            flex-wrap: wrap;
            align-content: center;
            .count {
              font-size: 24px;
              font-weight: 700;
              letter-spacing: 2.4px;
            }
            div {
              width: 100%;
              text-align: center;
              background: linear-gradient(to bottom, white, #f6ad04);
              -webkit-background-clip: text;
              color: transparent;
              // 转变为行内块元素 文字渐变才会生效
              display: inline-block;
              font-size: 12px;
            }
          }
          .img_2 {
            width: 85px;
            height: 85px;
            // background-image: url("@/assets/img/zhaopiankuang.png");
            // background-size: 100%;
            // background-repeat: no-repeat;
            position: relative;
            .img_bg {
              width: 96px;
              height: 85px;
              position: absolute;
              top: 0;
              left: -6px;
            }
            .hd_img {
              width: 72px;
              height: 72px;
              z-index: 1;
            }
          }
        }
      }
    }
  }
}
</style>